import React, { Component } from 'react';
import axios from 'axios';
import { List, WingBlank, Carousel, Button, WhiteSpace } from 'antd-mobile';
import { addGoods } from '../actions/cart';
import { fetchDetail } from '../actions/detail';
import { connect } from 'react-redux';
const Item = List.Item;
const Brief = Item.Brief;
const mapStateToProps = state => {
  return {
    detail: state.detail,
    cart: state.carts
  };
};
class Detail extends Component {
  componentDidMount() {
    this.props.fetchDetail(this.props.match.params.id);
  }

  render() {
    const { detail, addGoods } = this.props;
    return (
      <div>
        <div>
          <List renderHeader={() => '商品详情'} className="my-list">
            {detail.map(val => (
              <Item
                arrow="empty"
                multipleLine={true}
                platform="android"
                key={val.id}
              >
                {val.name}
                <Brief wrap={true}>{val.text}</Brief>
              </Item>
            ))}
          </List>
        </div>
        <WingBlank>
          <Carousel autoplay infinite>
            {detail.map(val => (
              <a
                key={val.id}
                style={{ display: 'inline-block', width: '100%', height: 170 }}
              >
                <img
                  src={val.url}
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>
          <Button
            type="primary"
            onClick={detail => addGoods(this.props.detail[0])}
          >
            加入购物车
          </Button>
          <WhiteSpace />
        </WingBlank>
      </div>
    );
  }
}
export default connect(
  mapStateToProps,
  { addGoods, fetchDetail }
)(Detail);
